import { forwardRef, useImperativeHandle, useMemo } from 'react';
import Tinymce from '@inbiz/basic/Tinymce';
import { connect, mapProps } from '@formily/react';
import { getMessage } from '@inbiz/react';
import { isEditorENV, useEvents } from '@inbiz/utils';
import api from './api';

const version = InbizConfig.API_VERSION;

export interface EformRichTextProps {
  /**
   * @description 组件样式名，和style样式对应 ↓↓ eg: inbiz-Favorite ↓↓
   */
  prefixCls?: string;
  defaultvalue?: string;
  placeholder?: string;
  tooltype?: any;
  toolbar?: {
    menu: string[];
    toolbar: string[];
  };
  boxHeight?: any;
  value: any;
  onChange: Function;
  viewMode?:string;
  callBackEvents?: {
    onBeforeChange?: (v: string) => boolean;
  };
  emit?: {
    (type: 'onclick'): void;
  };
  readOnly: boolean;
  disabled: boolean;
}

const EformRichText = forwardRef((props: EformRichTextProps, ref) => {
  const {
    placeholder,
    tooltype,
    toolbar,
    boxHeight,
    readOnly,
    disabled,
    viewMode
  } = props;
  const imguploadurl = `/inbiz/api/services/front/engines/v${version}/common/uploadImage`;
  const videouploadurl = `/inbiz/api/services/front/engines/v${version}/common/uploadVideo`;

  const [configEvents] = useEvents(props.callBackEvents, props.emit);
  let typeStatus = isEditorENV();

  useImperativeHandle(
    ref,
    () => ({
      ...api(configEvents),
    }),
    [],
  );

  const onChange = (newValue: any) => {
    if (newValue !== props.value) {
      props.onChange?.(newValue);
    }
  };
  const Ttoolbar = useMemo(() => {
    return Object.keys(toolbar || {}).length ? toolbar : undefined
  }, [toolbar])
  return (
    <div
      style={{
        cursor: readOnly || disabled ? 'no-drop' : '',
        pointerEvents: typeStatus ? 'none' : 'auto',
      }}
    >
      {viewMode=='look'?(<div dangerouslySetInnerHTML={{__html:props.value}}></div>):
            <Tinymce
            readOnly={readOnly || disabled }
            EditorValue={props.value}
            onChange={onChange}
            placeholder={placeholder}
            tooltype={tooltype}
            tinymceConfig={Ttoolbar}
            boxHeight={boxHeight}
            imguploadurl={imguploadurl}
            videouploadurl={videouploadurl}
            contentStyle={style}
          />
      }

    </div>
  );
});

(
  EformRichText as typeof EformRichText &
  IDefaultValueFormat<{ defaultvalue: string }>
).defaultValueFormat = (props: any): string => {
  return props.defaultvalue;
};

export default connect(
  EformRichText,
  mapProps({}, function (props: EformRichTextProps, field) {
    const others = props;
    others.placeholder = getMessage(props.placeholder);
    return {
      ...others,
      boxHeight: field.decoratorProps?.style?.height,
      boxPadding: field.decoratorProps?.style?.padding,
    };
  }),
);

const style = `
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: #ddd;
  -webkit-transition: background-color 0.25s ease-in-out;
  transition: background-color 0.25s ease-in-out;
};
::-webkit-scrollbar-thumb {
  background-color: #ddd;
}
::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 4px;
  --webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: #ddd;
  -webkit-transition: background-color 0.25s ease-in-out;
  transition: background-color 0.25s ease-in-out;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background-color: #ddd;
}
html:hover::-webkit-scrollbar,
body:hover::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: #ddd;
  border-radius: 4px;
}
html:hover::-webkit-scrollbar-track,
body:hover::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 4px;
  --webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
html:hover::-webkit-scrollbar-thumb,
body:hover::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 4px;
  --webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}`;
